<script lang="ts">
import type { VNode } from 'vue';
import { isFunction } from '@peng_kai/kit/libs/lodash-es';
</script>

<script lang="ts" setup>
export interface IList { title: string; content: string | (() => VNode) }
const appStore = useAppStore();

const qaqList = computed(() => [
  {
    title: $t('ciOj2JaS1CcuVPk5gryX'),
    content: `${$t('exN8q6lZtDvYyd8rvPv', { name: appStore.appName })}
    <p >${$t('zdIYePGglIfOu5YlcvPka')}</p>
    <p >${$t('yoQsCeFl0d7MuyvQrcHbR')}</p>`,
  },
  {
    title: $t('qWnIuzes9FukToNZvNs'),
    content: `${$t('exN8q6lZtDvYyd8rvPv', { name: appStore.appName })}
      <p>${$t('rvKeHi1J67WTjNuWtFaw')}</p>
      <p>${$t('l8Yo8gf9OCaNda7fknh7K')}</p>
      <p>${$t('twKo30rMBbWVmyReL21qO')}</p>
    `,
  },
  {
    title: $t('xXeQwY4phopn7fJ5Dtpw'),
    content: `${$t('eilDyTkw1Y2Sd2wOtUk3i', { name: appStore.appName })}
  <p>${$t('imDqk13H23mVLeumqmWQo')}</p>
  <p>${$t('l8Yo8gf9OCaNda7fknh7K')}</p>
  <p>${$t('rpGpjABJsHnLnyFqJu')}</p>
`,
  },
  {
    title: $t('z3IUSc0fmm7zpJf2EHk'),
    content: $t('sl2BeNxJhen9iTwwLpSv'),
  },
  {
    title: $t('ygudxDl2c1xdpngsFwrrJ'),
    content: `${$t('exN8q6lZtDvYyd8rvPv', { name: appStore.appName })}
    <p>${$t('rz422N0FedF9du6p0ZgOp')}</p>
    <p>${$t('psUhixemoIixc3tsvtW87')}</p>`,
  },
  {
    title: $t('1n4JTdqWlAysPoCfO403V'),
    content: `${$t('exN8q6lZtDvYyd8rvPv', { name: appStore.appName })}
    <p>${$t('rz422N0FedF9du6p0ZgOp')}</p>
    <p>${$t('psUhixemoIixc3tsvtW87')}</p>`,
  },
  {
    title: $t('sOx1Nw11u9V9mdUYsOlc'),
    content: `${$t('frHsIi5OuOaX0hQvSy1Z')}
    <p>${$t('kaLrX7SnEfXg6d0se34uI')}</p>`,
  },
  {
    title: $t('zs8V9DGjvU5Ao8dFqkRb'),
    content: `${$t('kfEaKRtSIq6oYGtPR3vo')}
    <p>${$t('bU2xj9DpElGbFn0VKkJb')}</p>`,
  },
]);

const activeRef = defineModel<string | number>('active');

function RenderContent({ content }: { content: IList['content'] }) {
  if (!content)
    return null;
  if (isFunction(content))
    return content();
  const regex = /<[^>]+>/g;
  return regex.test(content) ? h('div', { innerHTML: content }) : content;
}
</script>

<template>
  <TCard>
    <div class="mb-4 text-5 font-600 lt-tabletl:(text-4 font-600)">
      {{ $t('gcarwMQyvckyGQtJouHpP', { name: appStore.appName }) }}
    </div>
    <ACollapse v-model="activeRef" accordion :border="false" class="ant-cover__collapse" expandIconPosition="end" :bordered="false">
      <ACollapsePanel
        v-for=" (item, idx) of qaqList"
        :key="idx "
        :name="idx"
        class="ant-cover__collapse-panel"
        :titleClass="$bp.ltTabletl ? 'text-3.5' : 'text-5'"
        :border="false"
      >
        <template #header>
          <div class="text-4 font-600 lt-tablet:text-3.5">
            {{ item.title }}
          </div>
        </template>
        <p class="text-4 text-sys-text-body lt-tabletl:text-3">
          <RenderContent :content="item.content" />
        </p>
      </ACollapsePanel>
    </ACollapse>
  </TCard>
</template>

<style lang="scss" scoped>
.ant-collapse-borderless {
  background-color: transparent;
}
</style>
